<template>
	<view>
		<view class="page">
			<view class="curved_box">
				<view class="text_cover">
					<view class="form">
						<view class="formItem">{{title}}</view>
						<view class="item-line"></view>
						<!-- <view class="loveText">{{conver}}</view> -->
						<text class="loveText" >{{conver}}</text>
						<view class="item-line"></view>
					</view>
					
					<!-- <view class="footerBtn">
						<image class="footerWriteImg" src="../../static/yesterday.PNG" @click="yesterday"></image>
						<image class="footerReadImg" src="../../static/tomorrow.PNG" @click="tomorrow"></image>
					</view> -->
					<view class="item-line"></view>
					<block v-for="(item, index) in ImgArry" :key="index">
						<image class="img-item" mode="aspectFit" :src="item" @click="seeImg(item)"></image>
						<view class="item-line"></view>
					</block>
					<block v-for="(item, index) in videoArry" :key="index">
						<video  :src="item"></video>
						<view class="item-line"></view>
					</block>
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '../../appcould.js'
export default {
	data() {
		return {
			title:'',
			conver:'',
			ImgArry:[],
			videoArry:[],
		};
		
	},
	onLoad(e){
		console.log(e)
		this.title=e.name
		this.getData(e.id)
	},
	methods:{
		getData(id){
			let that=this;
			app.callFunction('select_conver',{
				_id:id
			},(data,res)=>{
				console.log(res)
				if (res.success) {
					that.conver=data.conver
					that.ImgArry=data.imgArryId
					that.videoArry=data.vidArryId
				}
			},true);
		},
		//  全屏预览图片
		seeImg(item){
			wx.previewImage({
			  current: item, // 当前显示图片的http链接
			  urls: [item] // 需要预览的图片http链接列表
			});
		},
		  
		
		yesterday(){},
		tomorrow(){},
	}
};
</script>

<style lang="less">
page {
	// background-color: #ffeefe; /* 页面背景色 */
}
.page {
	display: flex;
	flex-direction: column;
	box-sizing: bo rder-box;
	min-height: 100%;
	// background-color: #ffeefe; /* 页面背景色 */
	height: auto;
}

.curved_box {
	display: inline-block;
	display: inline;
	width: 600rpx;
	margin: 80rpx;
	height: auto;
	background-color: #fdf5e5;
	border: 1px solid #eee;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	position: relative;
	zoom: 1;
}

.curved_box:before {
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
	left: 15px;
}
.curved_box:after {
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
	right: 15px;
}

.curved_box:before,
.curved_box:after {
	width: 70%;
	height: 55%;
	content: ' ';

	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

	position: absolute;
	bottom: 10px;
	z-index: -1;
}
.img {
	width: 260rpx;
	height: 260rpx;
	border-radius: 90rpx;
	margin-top: 10rpx;
}
.img-item{
	width: 400rpx;
	height: 800rpx;
	margin-left: 20rpx;
}
.text_cover {
	.text-center {
		text-align: center;
	}
	.titleImg {
		height: 60rpx;
		width: 120rpx;
		margin-top: 10rpx;
		margin-left: 400rpx;
	}
	.addImg {
		height: 200rpx;
		width: 200rpx;
		margin-left: 170rpx;
	}
	.textImg {
		height: 160rpx;
		width: 380rpx;
		margin-left: 80rpx;
	}
	.loveImg {
		height: 450rpx;
		width: 450rpx;
		margin-left: 40rpx;
	}
	.footerBtn {
		.footerWriteImg {
			height: 80rpx;
			width: 200rpx;
		}
		.footerReadImg {
			height: 80rpx;
			width: 200rpx;
			margin-left: 130rpx;
		}
	}
	.loveText {
		font-size: 36rpx;
		font-family: '楷体';
		margin-top: 10rpx;
		.text-2 {
			margin-left: 70rpx;
		}
	}

	//item分割线
	.item-line {
		height: 1px;
		width: 750rpx;
		transform: scaleY(0.3);
		background-color: rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	.text-aire {
		margin-left: 36rpx;
	}
	.form {
		display: block;
		.formItem {
			box-sizing: border-box;
			width: 100%;
			height: 112rpx;
			font-size: 36rpx;
			padding: 32rpx;
			margin: 20rpx 0;
			border-radius: 56rpx;
			font-family: '楷体';
			&.submit {
				// color: #ffffff;
				text-align: center;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>
